<template>
    <div>
        <div class="weui-mask" v-show="show"></div>
        <div class="f-dialog" v-show="show">
            <!--<img v-if="dialogImgUrl" :src="dialogImgUrl" alt="弹窗提示">-->
            <div class="f-dialog-img">
                <img src="../../assets/img/collect_result_bg.png" alt="">
            </div>
            <h3 class="f-dialog-header" v-if="title">{{ title }}</h3>
            <!--内容在插槽中写-->
            <p class="f-dialog-content">
                <slot></slot>
            </p>
            <div class="f-dialog-footer dialog-single-footer"
                 v-if="type === 'confirm'"
                 @click="handleClickConfirm"
            >{{ confirmText }}</div>
            <div class="f-dialog-footer" v-if="type === 'dialog'">
                <span  @click="handleClickConfirm">{{ confirmText }}</span>
                <span  @click="handleClickCancel">{{ cancelText }}</span>
            </div>
        </div>
    </div>

</template>

<script>
    /**
     * Created by c.y on 2018/3/16.
     * 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
     * 全局的对话框
     */
    export default {
        name: 'f-confirm',
        methods: {
            // 点击确认事件
            handleClickConfirm () {
                this.$emit('on-click-confirm');
            },
            // 点击取消事件
            handleClickCancel () {
                this.$emit('on-click-cancel');
            }
        },
        model: {
            prop: 'show',
        },
        props: {
            show: {
                type: Boolean,
                default: false
            },
            // 弹窗的图标
            dialogImgUrl: String,
            // title
            title: String,
            // 确认文字
            confirmText: String,
            // 取消文字
            cancelText: String,
            // type为两个，一个为confirm即底部只有一个按钮，dialog是有两个按钮
            type: {
                type: String,
                default: 'confirm'
            }
        }
    }
</script>

<style lang="less">
    @import "../../style/mixin";
    .f-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 280px;
        min-height: 128px;
        text-align: center;
        border-radius: @border-radius-normal-size;
        background: @color-white;
        z-index: 1000;
        .f-dialog-img {
          position: relative;
          height: 40px;
            img {
                position: absolute;
                left: 50%;
                top: -32px;
                width: 64px;
                height: 64px;
                transform: translate(-50%,0);
                border-radius: 50%;
            }
        }
        .f-dialog-header {
            padding-top: 9px;
            font-size: @font-size-large;
            line-height: 2.14;
            font-weight: normal;
            color: @color-text-primary;
        }
        .f-dialog-content {
            font-size: @font-size-medium;
            line-height: 1.6;
            color: @color-text-secondary;
            padding-bottom: 14px;
        }
        .f-dialog-footer {
            position: relative;
            width: 100%;
            height: 44px;
            line-height: 44px;
            font-size: @font-size-primary;
            color: @color-text-third;
            text-align: center;
            .flexLayout();
            span {
                flex: 1;
                &:last-child {
                    position: relative;
                    color: @color-primary;
                    &:before {
                        .setLeftLine(@color-divider-regular);
                    }
                }
            }
            &:before {
                .setTopLine(@color-divider-regular);
            }
        }
        .dialog-single-footer {
            display: block;
            color: @color-primary;
        }
    }
</style>
